import 'package:car_map/page/res/gaps.dart';
import 'package:car_map/page/squarepage/attractions_page/lableItem_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'load_image.dart';

///必体验列表
class WidgetExperienceList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView.builder(
        itemBuilder: (context, index) {
          return itemList();
        },
        itemCount: 10,
        shrinkWrap: true,
        physics: new NeverScrollableScrollPhysics(),
      ),
    );
  }

  Widget itemList() {
    return Container(
      margin: EdgeInsets.only(top: 20.0),
      height: ScreenUtil().setHeight(210.0),
      padding: EdgeInsets.only(left: 10.0, right: 10.0),
      child: Row(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(right: 10.0),
            alignment: Alignment.topLeft,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
            child: Stack(
              children: <Widget>[
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: LoadImage(
                    'https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/tfscom/TB1p90gXH1YBuNjSszeSuublFXa_200x200xz',
                    fit: BoxFit.fill,
                    width: ScreenUtil().setWidth(140.0),
                    height: ScreenUtil().setHeight(170.0),
                  ),
                ),
                Positioned(
                    left: -1.0,
                    top: -1.0,
                    child: Container(
                      padding: EdgeInsets.all(3.0),
                      decoration: BoxDecoration(
                          color: Colors.yellow,
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(3.0),
                              bottomLeft: Radius.circular(3.0),
                              bottomRight: Radius.circular(3.0))),
                      child: Text(
                        'TOP1',
                        style: TextStyle(fontSize: ScreenUtil().setSp(15.0)),
                      ),
                    ))
              ],
            ),
          ),
          Gaps.vGap5,
          Container(
            width: ScreenUtil().setWidth(545.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  '秦始皇帝陵博物馆',
                  style: TextStyle(
                      fontSize: ScreenUtil().setSp(19.0),
                      fontWeight: FontWeight.bold),
                ),
                Gaps.vGap5,
                LableItemWidget(),
                Gaps.vGap5,
                Text(
                  '中国帝王陵墓中，以其规模宏大而著称，可以在陵墓的周边徘徊思古。中国帝王陵墓中，以其规模宏大而著称，可以在陵墓的周边徘徊思古中国帝王陵墓中，以其规模宏大而著称',
                  style: TextStyle(fontSize: ScreenUtil().setSp(18.0)),
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis,
                  softWrap: true,
                  textAlign: TextAlign.left,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Text('4.8分',
                        style: TextStyle(fontSize: ScreenUtil().setSp(19.0))),
                    Gaps.hGap5,
                    Text('6047点评',
                        style: TextStyle(fontSize: ScreenUtil().setSp(19.0))),
                    Gaps.hGap5,
                    Text(' | ',
                        style: TextStyle(fontSize: ScreenUtil().setSp(19.0))),
                    Gaps.hGap5,
                    Text('距离39.1km',
                        style: TextStyle(fontSize: ScreenUtil().setSp(19.0))),
                  ],
                ),
                Gaps.vGap5,
                Row(
                  children: <Widget>[
                    Container(
                      padding: EdgeInsets.all(2.0),
                      decoration: BoxDecoration(
                          color: Colors.deepOrange,
                          borderRadius: BorderRadius.all(Radius.circular(2.0))),
                      child: Text(
                        '可订',
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: ScreenUtil().setSp(16.0)),
                      ),
                    ),
                    Gaps.hGap5,
                    Text('￥88',
                        style: TextStyle(
                            fontSize: ScreenUtil().setSp(19.0),
                            color: Colors.deepOrange)),
                    Gaps.hGap5,
                    Text('起',
                        style: TextStyle(fontSize: ScreenUtil().setSp(19.0))),
                    Gaps.hGap5,
                    Container(
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(3.0)),
                          border:
                              Border.all(color: Colors.deepOrange, width: 1.0)),
                      child: Text(
                        '今日可用',
                        style: TextStyle(
                            color: Colors.deepOrange,
                            fontSize: ScreenUtil().setSp(19.0)),
                      ),
                    )
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
